<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!--<%@ taglib prefix="c1" uri="http://java.sun.com/jstl/core_rt"%>-->
<html>
<head>
	<base href="${pageContext.request.contextPath}/">
<meta charset="UTF-8">

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src="jquery/bs_typeahead/bootstrap3-typeahead.min.js"></script>
<script type="text/javascript">
	$(function() {
		//给“阶段”添加变换事件
		$("#create-stage").change(function(){
			var stage = $.trim($(this).find("option:selected").text());
			if(stage == "") {
				$("#create-possibility").val();
				return;
			}
			//发送请求
			$.ajax({
				url:"workbench/transaction/getPossibilityFromProperties.do",
				data:{stage},
				type:"post",
				dataType:"json",
				success:function(data) {
					$("#create-possibility").val(data + "%");
				}
			});
		});
		//使用bs_typeahead插件，实现自动补全
		$("#create-customerName").typeahead({
			source:function(query,process) {
				$.ajax({
					url:"workbench/transaction/queryCustomerNameByName.do",
					data:{name:query},//query：输入框中输入的值
					type:"post",
					dataType:"json",
					success:function(data) {
						process(data);//process可以把data转换成['xxx','xxx','xxx']格式的数据
					}
				});
			}
		});
		//给“市场活动源”按钮添加单击事件
		$("#findMarketActivityBtn").click(function(){
			//初始化
			$("#activityTBody").val("");
			$("#searchActivityTxt").val("");
			//显示模态窗口
			$("#findMarketActivity").modal("show");
		});
		//给"市场活动源“模态窗口的搜索框添加键盘弹起事件
		$("#searchActivityTxt").keyup(function(){
			//收集参数
			var name = $.trim(this.value);
			//发送请求
			$.ajax({
				url:"workbench/transaction/queryActivityByName.do",
				data:{name},
				type:"post",
				dataType:"json",
				success:function(data) {
					if(data.code == "1"){
						var htmlStr = "";
						$.each(data.retObj,function(index,obj){
							htmlStr+="<tr>";
							htmlStr+="	<td><input type=\"radio\" id=\""+obj.id+"\" activityName=\""+obj.name+"\" name=\"activity\"/></td>";
							htmlStr+="	<td>"+obj.name+"</td>";
							htmlStr+="	<td>"+obj.startDate+"</td>";
							htmlStr+="	<td>"+obj.endDate+"</td>";
							htmlStr+="	<td>"+obj.owner+"</td>";
							htmlStr+="</tr>";
						});
						$("#activityTBody").html(htmlStr);
					}
				}
			})
		});
		//给"市场活动源"模态窗口的单选按钮添加单击事件
		$("#activityTBody").on("click","input[type='radio']",function(){
			$("#create-activityId").val($(this).prop("id"));
			$("#create-activityName").val($(this).attr("activityName"));
			$("#findMarketActivity").modal("hide");
		});
		//给"联系人“按钮添加单击事件
		$("#findContactsBtn").click(function(){
			//初始化
			$("#searchContactsTxt").val("");
			$("#contactsTBody").val("");
			//显示模态窗口
			$("#findContacts").modal("show");

		});
		//给“联系人”模态窗口的搜索框添加键盘弹起事件
		$("#searchContactsTxt").keyup(function(){
			//收集参数
			var name = $.trim(this.value);
			//发送请求
			$.ajax({
				url:"workbench/transaction/queryContactsByName.do",
				data:{name},
				type:"post",
				dataType:"json",
				success:function(data) {
					if(data.code == "1"){
						var htmlStr = "";
						$.each(data.retObj,function(index,obj){
							htmlStr+="<tr>";
							htmlStr+="	<td><input type=\"radio\" id=\""+obj.id+"\" contactsName=\""+obj.fullname+"\" name=\"activity\"/></td>";
							htmlStr+="	<td>"+obj.fullname+"</td>";
							htmlStr+="	<td>"+obj.email+"</td>";
							htmlStr+="	<td>"+obj.mphone+"</td>";
							htmlStr+="</tr>";
						});
						$("#contactsTBody").html(htmlStr);
					}
				}
			})
		});
		//给"联系人"模态窗口的单选按钮添加单击事件
		$("#contactsTBody").on("click","input[type='radio']",function(){
			$("#create-contactsId").val($(this).prop("id"));
			$("#create-contactsName").val($(this).attr("contactsName"));
			$("#findContacts").modal("hide");
		});
		//给保存按钮添加单击事件
		$("#saveCreateTranBtn").click(function(){
			//收集参数
			var owner = $("#create-owner").val();
			var customerName = $.trim($("#create-customerName").val());
			var money = $.trim($("#create-money").val());
			var name = $.trim($("#create-name").val());
			var expectedDate = $("#create-expectedDate").val();
			var stage = $("#create-stage").val();
			var type = $("#create-type").val();
			var source = $("#create-source").val();
			var activityId = $("#create-activityId").val();
			var contactsId = $("#create-contactsId").val();
			var description = $("#create-description").val();
			var contactSummary = $("#create-contactSummary").val();
			var nextContactTime = $("#create-nextContactTime").val();
			//表单验证
			//发送请求
			$.ajax({
				url:"workbench/transaction/saveCreateTran.do",
				data:{
					owner,customerName,money,name,expectedDate,stage,type,source,activityId,contactsId,description,contactSummary,nextContactTime,
				},
				type:"post",
				dataType:"json",
				success:function(data){
					if(data.code == "1") {
						window.location.href="workbench/transaction/index.do";
					}else {
						alert(data.message);
					}
				}
			})

		});
		//给“取消”按钮添加单击事件
		$("#unsaveCreateTranBtn").click(function(){
			window.location.href = "workbench/transaction/index.do";
		})
	});
</script>
</head>
<body>

	<!-- 查找市场活动 -->
	<div class="modal fade" id="findMarketActivity" role="dialog">
		<div class="modal-dialog" role="document" style="width: 80%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">查找市场活动</h4>
				</div>
				<div class="modal-body">
					<div class="btn-group" style="position: relative; top: 18%; left: 8px;">
						<form class="form-inline" role="form">
						  <div class="form-group has-feedback">
						    <input type="text" id="searchActivityTxt" class="form-control" style="width: 300px;" placeholder="请输入市场活动名称，支持模糊查询">
						    <span class="glyphicon glyphicon-search form-control-feedback"></span>
						  </div>
						</form>
					</div>
					<table id="activityTable3" class="table table-hover" style="width: 900px; position: relative;top: 10px;">
						<thead>
							<tr style="color: #B3B3B3;">
								<td></td>
								<td>名称</td>
								<td>开始日期</td>
								<td>结束日期</td>
								<td>所有者</td>
							</tr>
						</thead>
						<tbody id="activityTBody">
							<%--<tr>
								<td><input type="radio" name="activity"/></td>
								<td>发传单</td>
								<td>2020-10-10</td>
								<td>2020-10-20</td>
								<td>zhangsan</td>
							</tr>
							<tr>
								<td><input type="radio" name="activity"/></td>
								<td>发传单</td>
								<td>2020-10-10</td>
								<td>2020-10-20</td>
								<td>zhangsan</td>
							</tr>--%>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

	<!-- 查找联系人 -->
	<div class="modal fade" id="findContacts" role="dialog">
		<div class="modal-dialog" role="document" style="width: 80%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">查找联系人</h4>
				</div>
				<div class="modal-body">
					<div class="btn-group" style="position: relative; top: 18%; left: 8px;">
						<form class="form-inline" role="form">
						  <div class="form-group has-feedback">
						    <input type="text" id="searchContactsTxt" class="form-control" style="width: 300px;" placeholder="请输入联系人名称，支持模糊查询">
						    <span class="glyphicon glyphicon-search form-control-feedback"></span>
						  </div>
						</form>
					</div>
					<table id="activityTable" class="table table-hover" style="width: 900px; position: relative;top: 10px;">
						<thead>
							<tr style="color: #B3B3B3;">
								<td></td>
								<td>名称</td>
								<td>邮箱</td>
								<td>手机</td>
							</tr>
						</thead>
						<tbody id="contactsTBody">

						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>


	<div style="position:  relative; left: 30px;">
		<h3>创建交易</h3>
	  	<div style="position: relative; top: -40px; left: 70%;">
			<button type="button" class="btn btn-primary" id="saveCreateTranBtn">保存</button>
			<button type="button" class="btn btn-default" id="unsaveCreateTranBtn">取消</button>
		</div>
		<hr style="position: relative; top: -40px;">
	</div>
	<form class="form-horizontal" role="form" style="position: relative; top: -30px;">
		<div class="form-group">
			<label for="create-owner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<select class="form-control" id="create-owner">
				  <c:forEach items="${userList}" var="user">
					  <option value="${user.id}">${user.name}</option>
				  </c:forEach>
				</select>
			</div>
			<label for="create-money" class="col-sm-2 control-label">金额</label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="create-money">
			</div>
		</div>

		<div class="form-group">
			<label for="create-name" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="create-name">
			</div>
			<label for="create-expectedDate" class="col-sm-2 control-label">预计成交日期<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="date" class="form-control" id="create-expectedDate">
			</div>
		</div>

		<div class="form-group">
			<label for="create-customerName" class="col-sm-2 control-label">客户名称<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="hidden" id="create-customerId">
				<input type="text" class="form-control" id="create-customerName" placeholder="支持自动补全，输入客户不存在则新建">
			</div>
			<label for="create-stage" class="col-sm-2 control-label">阶段<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
			  <select class="form-control" id="create-stage">
				  <option></option>
				  <c:forEach items="${stageList}" var="stage">
					  <option value="${stage.id}">${stage.value}</option>
				  </c:forEach>
			  </select>
			</div>
		</div>

		<div class="form-group">
			<label for="create-type" class="col-sm-2 control-label">类型</label>
			<div class="col-sm-10" style="width: 300px;">
				<select class="form-control" id="create-type">
				  <option></option>
					<c:forEach items="${transactionTypeList}" var="transactionType">
						<option value="${transactionType.id}">${transactionType.value}</option>
					</c:forEach>
				</select>
			</div>
			<label for="create-possibility" class="col-sm-2 control-label">可能性</label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="create-possibility" readonly>
			</div>
		</div>

		<div class="form-group">
			<label for="create-source" class="col-sm-2 control-label">来源</label>
			<div class="col-sm-10" style="width: 300px;">
				<select class="form-control" id="create-source">
				  <option></option>
					<c:forEach items="${sourceList}" var="source">
						<option value="${source.id}">${source.value}</option>
					</c:forEach>
				</select>
			</div>
			<label for="create-activityName" class="col-sm-2 control-label">市场活动源&nbsp;&nbsp;<a href="javascript:void(0);" id="findMarketActivityBtn"><span class="glyphicon glyphicon-search"></span></a></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="hidden" id="create-activityId">
				<input type="text" class="form-control" id="create-activityName" readonly>
			</div>
		</div>

		<div class="form-group">
			<label for="create-contactsName" class="col-sm-2 control-label">联系人名称&nbsp;&nbsp;<a href="javascript:void(0);" id="findContactsBtn"><span class="glyphicon glyphicon-search"></span></a></label>
			<div class="col-sm-10" style="width: 300px;">
				<input	type="hidden" id="create-contactsId">
				<input type="text" class="form-control" id="create-contactsName" readonly>
			</div>
		</div>

		<div class="form-group">
			<label for="create-description" class="col-sm-2 control-label">描述</label>
			<div class="col-sm-10" style="width: 70%;">
				<textarea class="form-control" rows="3" id="create-description"></textarea>
			</div>
		</div>

		<div class="form-group">
			<label for="create-contactSummary" class="col-sm-2 control-label">联系纪要</label>
			<div class="col-sm-10" style="width: 70%;">
				<textarea class="form-control" rows="3" id="create-contactSummary"></textarea>
			</div>
		</div>

		<div class="form-group">
			<label for="create-nextContactTime" class="col-sm-2 control-label">下次联系时间</label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="date" class="form-control" id="create-nextContactTime">
			</div>
		</div>

	</form>
</body>
</html>
